<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title></title>
</head>
<body>
<div id="box" style="color: red;">
    <ul>
        <li class="testLi">11</li>
        <li class="testLi">12</li>
        <li class="testLi">11</li>
        <li class="testLi">12</li>
    </ul>
</div>
<div id="pox">
    <ul>
        <li>pox</li>
        <li>pox</li>
        <li>pox</li>
        <li>pox</li>
        <li>pox</li>
    </ul>

</div>

<div class="test">
    <b>123</b>
</div>
<div class="test">
    <span class="test-span"></span>
    <b>321</b>
</div>
<b class="one-b"></b>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
    (function (window, document) {
        var w = window,
                doc = document;

        var Kodo = function (selector, context) {
            return new Kodo.prototype.init(selector, context);
        };
        Kodo.prototype = {
            constructor: Kodo,
            length: 0,
            splice: [].splice,
            selector: '',
            init: function (selector, context) { //dom选择的一些判断
                if (!selector) {
                    return this;
                }

                if (typeof selector == 'object') {
                    for (var i = 0; i < selector.length; i++) {
                        this[i] = selector[i];
                    }
                    this.length = selector.length;
                    return this;
                } else if (typeof selector == 'function') {
                    Kodo.ready(selector);
                    return;
                }

                var context = context || doc,
                        elm;

                if (selector.charAt(0) == '#' && !selector.match('\\s')) {
                    this.selector = selector;

                    selector = selector.substring(1);
                    elm = doc.getElementById(selector);

                    this[0] = elm;
                    this.context = context;
                    this.length = 1;
                    return this;
                } else {
                    elm = context.querySelectorAll(selector);
                    for (var i = 0; i < elm.length; i++) {
                        this[i] = elm[i];
                    }

                    this.selector = selector;
                    this.context = context;
                    this.length = elm.length;
                    return this;
                }
            },
            css: function (attr, val) { //链式测试
                for (var i = 0; i < this.length; i++) {
                    if (typeof attr == 'string') {
                        console.log(attr);
                        if (arguments.length == 1) {
                            return getComputedStyle(this[i], null)[attr];
                        }
                        this[i].style[attr] = val;
                    } else {
                        var _this = this[i];
                        f.each(attr, function (attr, val) {
                            _this.style.cssText += '' + attr + ':' + val + ';';
                        });
                    }
                }
                return this;
            },

            /**
             * @param {String} value
             * 新增设置和获取HTML方法
             */
            html: function (value) {
                if (value === undefined) {
                    return this[0].innerHTML;
                } else {
                    for (var i = 0; i < this.length; i++) {
                        this[i].innerHTML = value;
                    }
                }
                return this;
            },
            /**
             * @param {String} value
             * 新增设置和获取HTML方法
             */

            /**
             *  新增dom的append、before、after、remove方法
             */
            append: function (str) {
                for (var i = 0; i < this.length; i++) {
                    domAppend(this[i], 'beforeend', str);
                }
                return this;
            },
            before: function (str) {
                for (var i = 0; i < this.length; i++) {
                    domAppend(this[i], 'beforeBegin', str);
                }
                return this;
            },
            after: function (str) {
                for (var i = 0; i < this.length; i++) {
                    domAppend(this[i], 'afterEnd', str);
                }
                return this;
            },
            remove: function () { //只能删除自身
                for (var i = 0; i < this.length; i++) {
                    this[i].parentNode.removeChild(this[i]);
                }
                return this;
            },

            /**
             *  新增dom的append、before、after、remove方法
             */

            /**
             * @param {String} value
             * 新增设置和获取HTML方法
             */
            attr: function (attr, val) {
                for (var i = 0; i < this.length; i++) {
                    if (typeof attr == 'string') {
                        if (arguments.length == 1) {
                            return this[i].getAttribute(attr);
                        }
                        this[i].setAttribute(attr, val);
                    } else {
                        var _this = this[i];
                        f.each(attr, function (attr, val) {
                            _this.setAttribute(attr, val);
                        });
                    }
                }
                return this;
            },
            /**
             * @param {Object} attr
             * @param {Object} val
             * 新增 设置data和获取方法
             */
            data: function (attr, val) {
                for (var i = 0; i < this.length; i++) {
                    if (typeof attr == 'string') {
                        if (arguments.length == 1) {
                            return this[i].getAttribute('data-' + attr);
                        }
                        this[i].setAttribute('data-' + attr, val);
                    } else {
                        var _this = this[i];
                        f.each(attr, function (attr, val) {
                            _this.setAttribute('data-' + attr, val);
                        });
                    }
                }
                return this;
            },
            /**
             * @param {Object} attr
             * @param {Object} val
             * 新增
             */
            hasClass : function(cls) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                var arr = [];
                for (var i = 0; i < this.length; i++) {
                    if (this[i].className.match(reg)) arr.push(true);
                    else arr.push(false);
                }
                if (arr.indexOf(true) != -1)  return true;
                else  return false;
            },
            addClass: function (cls) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                for (var i = 0; i < this.length; i++) {
                    if (!this[i].className.match(reg))
                        this[i].className += ' ' + cls;
                }
                return this;
            },
            removeClass: function (cls) {
                var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
                for (var i = 0; i < this.length; i++) {
                    if (this[i].className.match(reg))
                        this[i].className = this[i].className.replace(' ' + cls, '');
                }
                return this;
            },
            find: function (selector) {
                if (!selector) return;
                var context = this.selector;
                return new Kodo(context + ' ' + selector);
            },
            first: function () {
                return new Kodo(this[0])
            },
            last: function () {
                var num = this.length - 1;
                return new Kodo(this[num]);
            },
            eq: function (num) {
                var num = num < 0 ? (this.length - 1) : num;
//						console.log(num);
                return new Kodo(this[num]);
            },
            get: function (num) {
                var num = num < 0 ? (this.length - 1) : num;
                console.log(num);
                return this[num];
            },
            next: function () {
                return sibling(this[0], "nextSibling");
            },
            prev: function () {
                return sibling(this[0], "previousSibling");
            },
            parent: function () {
                var parent = this[0].parentNode;
                parent && parent.nodeType !== 11 ? parent : null;
                var a = Kodo();
                a[0] = parent;
                a.selector = parent.tagName.toLocaleLowerCase();
                a.length = 1;
                return a;
            },
            parents: function () {
                var a = Kodo(),
                        i = 0;
                while ((this[0] = this[0]['parentNode']) && this[0].nodeType !== 9) {
                    if (this[0].nodeType === 1) {
                        a[i] = this[0];
                        i++;
                    }
                }
                a.length = i;
                return a;
            }
        }
        Kodo.prototype.init.prototype = Kodo.prototype;

        //工具方法
        Kodo.ready = function (fn) {
            doc.addEventListener('DOMContentLoaded', function () {
                fn && fn();
            }, false);
            doc.removeEventListener('DOMContentLoaded', fn, true);
        }
        Kodo.each = function (obj, callback) {
            var len = obj.length,
                    constru = obj.constructor,
                    i = 0;

            if (constru === window.f) {
                for (; i < len; i++) {
                    var val = callback.call(obj[i], i, obj[i]);
                    if (val === false) break;
                }
            } else if (isArray(obj)) {
                for (; i < len; i++) {
                    var val = callback.call(obj[i], i, obj[i]);
                    if (val === false) break;
                }
            } else {
                for (i in obj) {
                    var val = callback.call(obj[i], i, obj[i]);
                    if (val === false) break;
                }
            }
        }
        Kodo.get = function (url, sucBack, complete) {
            var options = {
                url: url,
                success: sucBack,
                complete: complete
            }
            ajax(options);
        }
        Kodo.post = function (url, data, sucback, complete) {
            var options = {
                url: url,
                type: "POST",
                data: data,
                success: sucback,
                complete: complete
            }
            ajax(options);
        }
        function ajax(options) {
            var defaultOptions = {
                url: false, //ajax 请求地址
                type: "GET",
                data: false,
                success: false, //数据成功返回后的回调方法
                complete: false //ajax完成后的回调方法
            };
            for (i in defaultOptions) {
                if (options[i] === undefined) {
                    options[i] = defaultOptions[i];
                }
            }

            var xhr = new XMLHttpRequest();
            var url = options.url;
            var params = formatParams(options.data);
            xhr.open(options.type, url);
            xhr.onreadystatechange = onStateChange;
            if (options.type === 'POST') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            }
            xhr.send(params ? params : null);

            function onStateChange() {
                if (xhr.readyState == 4) {
                    var result,
                            status = xhr.status;

                    if ((status >= 200 && status < 300) || status == 304) {
                        result = xhr.responseText;
                        ajaxSuccess(result, xhr)
                    } else {
                        console.log("ERR", xhr.status);
                    }
                }
            }

            function ajaxSuccess(data, xhr) {
                var status = 'success';
                options.success && options.success(data, options, status, xhr)
                ajaxComplete(status)
            }

            function ajaxComplete(status) {
                options.complete && options.complete(status);
            }

            function formatParams(data) {
                var arr = [];
                for (var name in data) {
                    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
                }
                arr.push(("v=" + Math.random()).replace("."));
                return arr.join("&");
            }
        }

        function sibling(cur, dir) {
            while ((cur = cur[dir]) && cur.nodeType !== 1) {
            }
            return cur;
        }

        function domAppend(elm, type, str) {  //实现append、after、before操作
            elm.insertAdjacentHTML(type, str);
        }

        function isArray(obj) {
            return Array.isArray(obj);
        }

        window.f = Kodo;
    })(window, document);

    f("#pox").data('id', "123");
    var str = "<a>我是新加入的aaa</a><a>我是新加入的aaa</a><a>我是新加入的aaa</a><a>我是新加入的aaa</a>"
    f("#pox li").append(str);
</script>
</body>
</html>
